<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script src="../js/jquery-3.2.0.js" type="text/javascript"></script>
    <title></title>
</head>
<body>
    <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">2013</a></li>
        <li><a href="#">十一月</a></li>
    </ol>

    <ul class="nav pagination pagination-lg">
        <li><a href="#">&lagran;</a> </li>
        <li><a href="#">1</a> </li>
        <li><a href="#">2</a> </li>
        <li><a href="#">3</a> </li>
        <li><a href="#">4</a> </li>
        <li><a href="#">5</a> </li>
        <li><a href="#">&raguo;</a> </li>
    </ul>

    <div class="nav-tabs">
        <nav>
            <span>HOME</span>
            <div>
                <label>JAVA</label>
                <input type="text" placeholder="HERE">
            </div>
        </nav>
    </div>

    <ul class="pager pagination-lg">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
    </ul>

    <span class="label label-primary">primary</span>
    <span class="label label-danger">danger</span>
    <span class="label label-info">info</span>

    <a href="#">Mailbox <span class="badge">89</span></a>

    <h4>胶囊赛事导航中的激活状态</h4>
        <ul class="nav nav-pills">
            <li class="">
                    <a href="#">首页
                        <span class="badge">234</span>
                    </a>
            </li>
            <li><a href="#">简介</a></li>
            <li><a href="#">消息</a></li>

        </ul>

    <div class="jumbotron">1
        <div class="container">2
            <div class="container-fluid">3

            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-sm-5 col-md-3">
            <div  class="thumbnail">
                <img src="http://www.runoob.com/wp-content/uploads/2014/06/thumbnail_demo.jpg" alt="通用的占位符缩略图">
                <div class="caption">
                    <h3>缩略图标签</h3>
                    <p>一些示例文本，一些实力文本</p>
                    <p>
                        <a href="#" class="btn btn-group">按钮</a>
                        <a href="#" class="btn btn-danger">按钮</a>
                    </p>
                </div>
            </div>
        </div>

    </div>

    <div class="progress progress-striped">
        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                aria-valuemin="0" aria-valuemax="100" style="width:40%">

        </div>


    </div>

    <h2>创建模态框（Modal）</h2>
    <!-- 按钮触发模态框 -->
    <div class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</div>
    <!-- 模态框（Modal） -->
    <div  class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
                </div>
                <div class="modal-body">在这里添加一些文本</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <a data-toggle="modal" href="#" data-target="#modal">请点击我</a>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel1">模态框（Modal）标题</h4>
                </div>
                <div class="modal-body">按下 ESC 按钮退出。</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <script>
        $(function() {
            $('#myModal1').modal({
                keyboard: true
            })
        });
    </script>

    <div>test</div>

    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://www.runoob.com/wp-content/uploads/2014/06/thumbnail_demo.jpg" alt="First slide">
            </div>
            <div class="item">
                <img src="http://www.runoob.com/wp-content/uploads/2014/06/thumbnail_demo.jpg" alt="Second slide">
            </div>
            <div class="item">
                <img src="http://p7.qhimg.com/t011499a8e0a8f259c4.jpg?size=600x450" alt="Third slide">
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="carousel-control left" href="#myCarousel"
           data-slide="prev">&lsaquo;
        </a>
        <a class="carousel-control right" href="#myCarousel"
           data-slide="next">&rsaquo;
        </a>
    </div>
</body>
</html>